<template>
  <div class="list">
    <el-table :data="tableData" border="" style="width: 100%">
      <el-table-column fixed prop="orderId" label="订单号" width="150">
      </el-table-column>
      <el-table-column prop="address.phone" label="收货电话" width="120">
      </el-table-column>
      <el-table-column prop="orderPrice" label="支付金额" width="120">
      </el-table-column>
      <el-table-column prop="goodsNum" label="商品ID" width="120">
      </el-table-column>
      <el-table-column fixed prop="storeId" label="商场编号" width="150">
      </el-table-column>
      <el-table-column prop="address.city" label="地址" width="250">
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="100">
      </el-table-column>
      <el-table-column prop="address.detail" label="承运快递" width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="100">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>
  
<script>
import axios from 'axios'; // 引入axios库    

export default {
  name: "OrderList",
  components: {

  },
  data() {
    return {
      tableData: []
    }
  },
  async created() {
    const user = JSON.parse(localStorage.getItem('user')); // 从localStorage中获取user对象  
    const userId = user && user.userId; // 获取userId值  

    if (userId) {
      try {
        const response = await axios.get(`http://localhost:8089/consumer/selectMyOrders?userId=${userId}`); // 使用axios库发送GET请求，将userId作为参数传递    
        if (response.status === 200) { // 检查响应状态码    
          this.tableData = response.data.data;
          console.log(this.orders);
        } else {
          console.error('Error fetching orders:', response);
        }
      } catch (error) {
        console.error('Error during API call:', error);
      }
    } else {
      console.error('User ID not found in localStorage.');
    }
  }
}    
</script>
  
<style scoped>
.list {
  width: 90%;
  margin: 10px auto;

}
</style>